<template>
  <div class="content_box">
    <div class="list_box" v-if="list.length">
      <div class="list" v-for="(item,index) in list" :key="index">
        <p>订单id：{{item.orderId}}</p>
        <p>手机号：{{item.mobile}}</p>
        <p>使用房间：{{item.roomName}}</p>
        <p>团购渠道：{{item.orderType==2?'美团':'抖音'}}</p>
        <p>状态：{{item.status == 0?'待审核':item.status == 1?'已同意':'已拒绝'}}</p>
        <p v-if="item.status == 1">发放优惠券：{{item.couponName}}</p>
        <div class="img">
          <img v-for="(child,i) in item.picUrl" :key="i" @click="preview(item,child)" :src="child" alt="">
        </div>
        <div class="button_box" v-if="item.status == 0">
          <van-button @click="refuse(item.id)" style="margin-right:50rpx" type="danger">拒绝</van-button>
          <van-button @click="agree(item.id)" type="primary">同意</van-button>
        </div>
      </div>
  
    </div>
    <div class="no_data" v-else>
      <img src="/static/images/no_sp.png" alt="">
      <p class="text">暂无评价列表</p>
    </div>

    <!-- 弹窗 -->
    <div class="pop_box">
      <van-popup :show="isAdmin" @close="closePop">
        <div class="box">
          <div class="title">
            <p>选择优惠券</p>
          </div>
            <picker class="picker" @change="PickerChange" :range="array" range-key="name">
              <div class="coupon">
                  <p>优惠券:</p>
                  <p>{{couponName}} <van-icon color="#333" name="arrow" /></p>
              </div>
            </picker>
            <div class="b_botton">
              <van-button @click="agree_submit" type="primary">同意</van-button>
            </div>
        </div>
      </van-popup>
    </div>

    <div class="m-overlay">
        <van-popup :show="isAnalysisShow" bind:close="onClose">
          <div class="m-confirm-wrap">
            <div class="box">
              <div class="title_box">
                <div class="title">
                  <p class="t_t">拒绝理由</p>
                </div>
                
                <div class="textarea">
                  <input v-model="rejectReason" type="textarea" placeholder="请输入理由">
                </div>
              </div>
              <div class="anniu">
                <div class="an cancel" @click="isAnalysisShow = false">取消</div>
                <div class="an confirm confirm_on" @click="queding">
                  确定
                </div>
              </div>
            </div>
          </div>
        </van-popup>
      </div>
  </div>
</template>
 
<script>
import {
  getRebatePage,
  refuseRebate,
  agreeRebate,
  getCouponList
} from "@/api/index";
export default {
  components: {},
  data() {
    return {
      list:[],
      id:'',
      isAdmin:false,
      isIphoneXnum:false,
      isAnalysisShow:false,
      query:{
        current: 1,
        size: 10,
      },
      array:[],
      couponName:'请选择',
      couponId:'',
      rebateId:'',
      rejectReason:''
    };
  },
  onShow() {
    this.isAdmin = false
    this.couponName = '请选择'
    this.couponId = ''
    this.rebateId = ''
    this.getCouponPage()
  },

  methods: {

    // 图片预览
    preview(item,child){
      wx.previewImage({
        current: child, // 图片的地址url
        urls: item.picUrl // 预览的地址url
      })
    },

    PickerChange(e){
      let index = +e.mp.detail.value
      this.couponId = this.array[index].id
      this.couponName = this.array[index].name
      console.log(e)
    },

    getCouponPage(){
      getCouponList().then(res=>{
        if(res.statusCode == '00000'){
          this.array = res.data
        }
      })
    },

    // 关闭弹窗
    closePop(){
      this.isAdmin = false
    },

    // 操作弹窗
    clickCz(item){
      this.isAdmin = true
      this.id = item.id
    },
    toEdit(state){
      this.isAdmin = false
      if(state){
        wx.navigateTo({
          url: `/pages/home/vipAdmin/edit/main?id=${this.id}`,
        });
        return
      }
      wx.navigateTo({
        url: `/pages/home/vipAdmin/edit/main`,
      });
    },

    // 会员列表
    getList(state){
      
      this.$showLoading('加载中...')
      getRebatePage(this.query).then(res=>{
        if(res.statusCode == '00000'){
          if(this.query.current != 1 && !res.data.records.length){
            this.$toast('已经到底了~')
            return
          }
          if(state){
            this.query.current = 1
            this.list = []
          }
          this.list = this.list.concat(res.data.records)
          wx.hideLoading()
          wx.hideNavigationBarLoading();
          wx.stopPullDownRefresh();
        }else{
          wx.hideLoading()
          wx.hideNavigationBarLoading();
          wx.stopPullDownRefresh();
          this.$toast(res.message)
        }
      })
    },

    queding(){
      if(!this.rejectReason){
        this.$toast('请输入拒绝理由！')
        return
      }
      let data = {
        rebateI:this.rebateId,
        rejectReason:this.rejectReason
      }
      console.log(data)
      refuseRebate(data).then(res=>{
        if(res.statusCode == '00000'){
          this.isAnalysisShow = false
          this.getList(true)
          this.$toast('已拒绝~')
        }else{
          this.$toast(res.message)
        }
      })
    },

    // 拒绝弹窗
    refuse(id){
      this.rebateId = id
      this.isAnalysisShow = true
      // wx.showModal({
      //   title: "温馨提示",
      //   content: "是否拒绝~",
      //   confirmText:'拒绝',
      //   success: (res)=>{
      //     if (res.confirm) {
      //       this.$showLoading('加载中...')
      //       refuseRebate({rebateId:id}).then(res=>{
      //         if(res.statusCode == '00000'){
      //           this.getList(true)
      //           this.$toast('已拒绝~')
      //         }else{
      //           this.$toast(res.message)
      //         }
      //       })
      //     }
      //   },
      // });
    },

    // 同意
    agree(id){
      this.rebateId = id
      this.isAdmin = true
    },

    // 同意弹窗
    agree_submit(){
      wx.showModal({
        title: "温馨提示",
        content: "是否同意~",
        confirmText:'同意',
        success: (res)=>{
          if (res.confirm) {
            this.$showLoading('加载中...')
            let data = {
              couponId:this.couponId,
              rebateId:this.rebateId
            }
            agreeRebate(data).then(res=>{
              if(res.statusCode == '00000'){
                this.getList(true)
                this.$toast('已同意~')
                this.isAdmin = false
              }else{
                this.$toast(res.message)
              }
            })
          }
        },
      });
    }
  },
  onLoad(options) {
    //判断手机机型，动态给底部添加样式
    wx.getSystemInfo({
      success: (res) => {
        console.log("手机信息res" + res.model);
        let modelmes = res.model;
        if (
          modelmes.search("iPhone 13") != -1 ||
          modelmes.search("iPhone 12") != -1 ||
          modelmes.search("iPhone 11") != -1 ||
          modelmes.search("iPhone X") != -1 ||
          modelmes.search("iPhone XR") != -1 ||
          modelmes.search("iPhone XS") != -1
        ) {
          this.isIphoneXnum = 25;
        } else {
          this.isIphoneXnum = 0;
        }
      },
    });
    this.getList(true)
  },
  // 下拉刷新
  onPullDownRefresh(){
    //在当前页面显示导航条加载动画
    wx.showNavigationBarLoading();
    this.query.current = 1
    this.query.size = 10
    this.getList(true)
  },
  // 上拉加载
  onReachBottom(){
    console.log('到底了')
    this.query.current += 1
    this.getList()
  },
  onHide() {},

  onUnload() {},
};
</script>

<style lang="scss" scoped>
.list_box{
  margin:0 30rpx;
  .list{
    border-bottom:1px solid #f5f5f5;
    font-size:30rpx;
    padding-bottom:30rpx;
    padding-top:30rpx;
    p{
      margin-bottom:10rpx;
      span{
        display: flex;
        height: 28rpx;
        line-height: 28rpx;
        background: #1E68FF;
        border-radius: 8rpx;
        text-align: center;
        color:#fff;
        font-size:20rpx;
        margin-left:10rpx;
        align-items: center;
        justify-content: center;
        padding:0 10rpx;
      }
    }
    .img{
      img{
        width: 150rpx;
        height: 150rpx;
        margin:20rpx 20rpx 20rpx 0;
        border:1px solid #f5f5f5;
      }
    }
    .button_box{
      text-align: right;
      display: flex;
      justify-content: flex-end;
    }
  }
}
.anniu_box{
  height: 150rpx;
  width: 100%;
  background: #fff;
  position: fixed;
  bottom:0;
  left: 0;
  .box{
    width: 92%;
    height: 150rpx;
    line-height: 150rpx;
    padding:0 30rpx;
    background: #fff;
    display: flex;
    align-items: center;
    .anniu{
      box-shadow: 0rpx 10rpx 20rpx #CEDBFA;
      border:none;
      width: 100%;
      height: 88rpx;
      line-height: 88rpx;
      background: #1E68FF;
      border-radius: 100rpx;
      text-align: center;
      color: #fff;
      font-size: 30rpx;
    }
  }
}
.no_data{
  text-align: center;
  font-size:28rpx;
  color:#333;
  padding-top:150rpx;
  .text{
    font-weight: 500;
    color:#999;
  }
  img{
    width: 248rpx;
    height: 248rpx;
  }
}
.pop_box{
  /deep/ .van-popup {
    width: 80%;
    background: #fff;
    border-top-right-radius: 20rpx !important;
    border-top-left-radius: 20rpx !important;
  }
  .box{
    background: #fff;
    .title{
      height: 104rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color:#323233;
      font-size:34rpx;
      border-bottom:1px solid #f0f0f0;
      position: relative;
      .tb{
        position: absolute;
        right:30rpx;
      }
    }
    .list{
      height: 104rpx;
      border-bottom:1px solid #f5f5f5;
      padding:0 40rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .name{
        font-size:32rpx;
        color:#323233;
      }
      .icon{
        width: 196rpx;
        height: 60rpx;
        display:flex;
        align-items: center;
        justify-content: center;
        border:1px solid #222;
        color:#222;
        font-size:28rpx;
        font-weight: 500;
        border-radius: 50rpx;
        &.on{
          opacity: 0.5;
        }
      }
      div{
        display: flex;
      }
      .tips{
        font-size:24rpx;
        color:red;
        margin-top:10rpx;
      }
      img{
        width: 32rpx;
        height: 32rpx;
        margin-right:10rpx;
      }
    }
    .line{
      width: 100%;
      height: 16rpx;
      background: #f8f8f8;
    }
    .quxiao{
      height: 100rpx;
      line-height: 100rpx;
      font-size:32rpx;
      color:#323233;
      text-align: center;
    }
  }
}

.pop_box{
    /deep/ .van-popup {
      border-top-right-radius: 20rpx !important;
      border-top-left-radius: 20rpx !important;
    }
    .box{
      .title{
        height: 104rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color:#323233;
        font-size:34rpx;
        border-bottom:1px solid #f0f0f0;
        position: relative;
        .tb{
          position: absolute;
          right:30rpx;
        }
      }
      .list{
        height: 104rpx;
        border-bottom:1px solid #f5f5f5;
        padding:0 40rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .name{
          font-size:32rpx;
          color:#323233;
        }
        .icon{
          width: 196rpx;
          height: 60rpx;
          display:flex;
          align-items: center;
          justify-content: center;
          border:1px solid #222;
          color:#222;
          font-size:28rpx;
          font-weight: 500;
          border-radius: 50rpx;
          &.on{
            opacity: 0.5;
          }
        }
        div{
          display: flex;
        }
        .tips{
          font-size:24rpx;
          color:red;
          margin-top:10rpx;
        }
        img{
          width: 32rpx;
          height: 32rpx;
          margin-right:10rpx;
        }
      }
      .line{
        width: 100%;
        height: 16rpx;
        background: #f8f8f8;
      }
      .quxiao{
        height: 100rpx;
        line-height: 100rpx;
        font-size:32rpx;
        color:#323233;
        text-align: center;
      }
      .coupon{
        height: 100rpx;
        border-bottom:1px solid #f5f5f5;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding:0 30rpx;
        font-size:30rpx;
        color:#333;
      }
    }
    .b_botton{
      text-align: center;
      padding:30rpx 0;
    }
  }
  .m-overlay {
  /deep/ .van-popup {
    border-radius: 32rpx;
    width: 80%;
  }

  .close {
    text-align: right;
    color: #333;
    padding: 20rpx 30rpx 0 0;
  }

  .m-confirm-wrap {
    width: 100%;
  }

  .m-confirm-wrap .box {
    border-radius: 32rpx;
    background: #f3f4f7;
  }

  .m-confirm-wrap .box .title_box {
    flex-wrap: wrap;
    font-size: 30rpx;
    font-weight: 500;
    padding: 30rpx 0;
  }

  .m-confirm-wrap .box .title_box .title {
    text-align: center;
    line-height: 50rpx;
    font-weight: 500;
    font-size: 32rpx;
    margin-bottom: 30rpx;
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 30rpx;
    position: relative;
    z-index: 2;
  }

  .anniu {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #f1f1f1;
  }

  .anniu .an {
    width: 50%;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    font-size: 32rpx;
    font-weight: 500;
  }

  .cancel {
    color: #333;
  }

  .confirm {
    color: #1E6AFF;
  }
  .textarea{
    margin:0 30rpx;
  }
}
</style>
